<template>
  <div class="container">
    <el-form :model="formInfo" ref="formInfo" :rules="formInfoRules">
      <el-row :gutter="20">
        <el-col :span="10" :offset="4">
          <el-form-item label="用户名" label-width="100px" prop="username"><el-input v-model="formInfo.username"></el-input></el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10" :offset="4">
          <el-form-item label="邮箱" label-width="100px" prop="email"><el-input v-model="formInfo.email"></el-input></el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-row :gutter="20" v-if="isState == 'add'">
        <el-col :span="10" :offset="4"
          ><el-form-item label="密码" label-width="100px" prop="password"> <el-input v-model="formInfo.password"></el-input></el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10" :offset="4"
          ><el-form-item label="角色" label-width="100px" prop="role"><el-input v-model="formInfo.role"></el-input></el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10" :offset="4"
          ><el-form-item label="权限组名称" label-width="100px" prop="permission">
            <el-select v-model="formInfo.permission_group_id" placeholder="请选择">
              <el-option v-for="item in getPermissions" :key="item.id" :label="item.title" :value="item.id"> </el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10" :offset="4"
          ><el-form-item label="联系电话" label-width="100px" prop="mobile"><el-input v-model="formInfo.phone"></el-input></el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="10" :offset="4">
          <el-form-item label="介绍" label-width="100px"><el-input placeholder="Please Input" style="heigth:100px"></el-input> </el-form-item
        ></el-col>
        <el-col :span="12" :offset="0"></el-col>
      </el-row>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="12" :offset="8"
        ><div style="text-align:right">
          <el-button @click="$emit('close')">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div></el-col
      >
      <el-col :span="12" :offset="0"></el-col>
    </el-row>
  </div>
</template>

<script>
import { add, update } from '@/api/base/users'
export default {
  name: 'usersAdd',
  props: {
    //获取状态 修改还是添加
    isState: {
      type: String,
      require: true
    },
    // 获取简易权限列表 渲染下拉框
    getPermissions: {
      type: Array,
      require: true
    },
    // 获取点击项的数据
    getEditValue: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      formInfo: {
        username: this.isState == 'edit' ? this.getEditValue.username : '',
        password: '',
        phone: this.isState == 'edit' ? this.getEditValue.phone : '',
        role: this.isState == 'edit' ? this.getEditValue.role : '',
        permission_group_id: this.isState == 'edit' ? this.getEditValue.permission_group_id : '',
        avatar: '',
        email: this.isState == 'edit' ? this.getEditValue.email : ''
      },
      formInfoRules: {
        username: [
          { min: 2, max: 8, message: '长度在2-8之间', trigger: 'blur' },
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { min: 2, max: 10, message: '长度在2-10之间', trigger: 'blur' },
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        email: [{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
      }
    }
  },
  methods: {
    //   提交事件
    async submit() {
      // 判断是add还是edit
      if (this.isState == 'add') {
        try {
          await add(this.formInfo)
          this.$message.success('用户添加成功')
          this.$emit('close')
        } catch (error) {
          console.log(error)
          this.$message.error('用户添加失败')
        }
      } else {
        // 是修改
        try {
          this.formInfo.id = this.getEditValue.id
          await update(this.formInfo)
          this.$message.success('用户修改成功')
          this.$emit('close')
        } catch (error) {
          console.log(error)
          this.$message.error('用户修改失败')
        }
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
